<template>
  <div id="index-content" class="content">
    <el-row :gutter="10">
      <el-col :span="24">
        <ontology-model-detail ref="ontology"/>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <dv-border-box-11 title="数据统计">
<!--          <el-button @click="updatePie"> update</el-button>-->
          <div id="pie-container"></div>
        </dv-border-box-11>
      </el-col>
      <el-col :span="12">
        <motorRight/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import motorRight from './motorRight.vue'
import ontologyModelDetail from "./ontologyModelDetail.vue";
import * as echarts from "echarts";
import axios from 'axios'

axios.defaults.baseURL = '/api'

export default {
  data() {
    return {
      data: {},
      selectNodeData: {},
    }
  },
  methods: {
    // genData(count) {
    //   const nameList = [
    //     '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
    //   ];
    //   const legendData = [];
    //   const seriesData = [];
    //   for (var i = 0; i < count; i++) {
    //     var name =
    //         Math.random() > 0.65
    //             ? makeWord(4, 1) + '·' + makeWord(3, 0)
    //             : makeWord(2, 1);
    //     legendData.push(name);
    //     seriesData.push({
    //       name: name,
    //       value: Math.round(Math.random() * 100000)
    //     });
    //   }
    //   return {
    //     legendData: legendData,
    //     seriesData: seriesData
    //   };
    //
    //   function makeWord(max, min) {
    //     const nameLen = Math.ceil(Math.random() * max + min);
    //     const name = [];
    //     for (var i = 0; i < nameLen; i++) {
    //       name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
    //     }
    //     return name.join('');
    //   }
    // },
    // updatePie() {
    //   axios.get('/ontology/props/statistic/', {
    //     params: {
    //       ontologyCategory: this.selectNodeData.selectNodeCategory,
    //       ontologyField: this.selectNodeData.selectNodeField
    //     }
    //   }).then(
    //       response => {
    //         this.data = JSON.parse(response.data);
    //         console.log(this.data);
    //       },
    //       // 失败
    //       error => {
    //         console.log('请求失败了', error.message);
    //       });
    // },
    initPie() {
      // 创建 ECharts 实例
      this.selectNodeData = this.$refs.ontology.selectNodeData
      const pieChartDom = document.getElementById('pie-container');
      const pieChart = echarts.init(pieChartDom);
      // const data = this.genData(50);
      axios.get('/ontology/props/statistic/', {
        params: {
          ontologyCategory: 0,
          ontologyField: 'manufacturer'
        }
      }).then(
          response => {
            this.data = JSON.parse(response.data);
            console.log(this.data);
            var option = {
              title: {
                text: '同名数量统计',
                subtext: '纯属虚构',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                type: 'scroll',
                orient: 'vertical',
                height: 680,
                right: 10,
                top: 20,
                bottom: 100,
                data: this.data.legendData,
                textStyle: {
                  color: '#ffffff'
                }
              },
              darkMode: true,
              series: [
                {
                  name: '姓名',
                  type: 'pie',
                  radius: '65%',
                  center: ['45%', '46%'],
                  data: this.data.seriesData,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            pieChart.resize()
            pieChart.setOption(option);
          },
          // 失败
          error => {
            console.log('请求失败了', error.message);
          });

    }
  },
  components: {
    motorRight,
    ontologyModelDetail
  },
  mounted() {
    this.initPie()
  }
};


</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

#pie-container {
  display: flex;
  position: relative;
  width: 900px;
  height: 800px;
  padding: 0px;
  margin: 0px;
  top: 60px;
  left: 15px;
  user-select: none;
  overflow: hidden;
  align-content: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>